<script lang="ts" setup>
import { getCartItmeCount } from "@/api/cart/cartItem";
import myCookies from "@/utils/myCookies";
import { onBeforeUpdate, onMounted, onUpdated, ref } from "vue";
const cartItemCount = ref(0);
// 初始化
function load() {
  // 购物车统计
  if (myCookies.getToken() !== undefined && myCookies.getToken() !== null) {
    getCartItmeCount().then((response) => {
      cartItemCount.value = response.data.data;
    });
  }
}
onMounted(() => {
  load();
});
// onBeforeUpdate(() => {
//   load();
// });
onUpdated(() => {
  load();
});
</script>
<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-demo"
    mode="horizontal"
    :router="true"
  >
    <el-menu-item index="/home"
      ><Icon icon="material-symbols:home-and-garden-rounded" />商城首页</el-menu-item
    >
  </el-menu>
  <el-menu
    :default-active="$route.path"
    class="el-menu-demo"
    mode="horizontal"
    :router="true"
    style="text-align: right"
  >
    <el-menu-item index="/cart">
      <Icon icon="solar:cart-large-bold" />
      <span> 采花车</span>
      <el-badge
        v-if="cartItemCount > 0"
        :value="cartItemCount"
        :offset="[-50, -8]"
        style=""
      >
        <span></span>
      </el-badge>
    </el-menu-item>
    <el-menu-item index="/orders"
      ><Icon
        icon="material-symbols-light:order-approve-outline-sharp"
      />我的订单</el-menu-item
    >
  </el-menu>
  <div class="h-6" />
</template>
<style lang="less">
.el-header {
  padding: 0;
  height: auto;
  width: 100%;
  min-width: 1300px;
}
.el-menu-demo {
  height: 30px;
  display: inline-block;
  width: 50%;
  font-family: cursive;
}
</style>

<style lang="less" scoped>
svg {
  margin: 10px;
}
.el-badge {
  --el-badge-bg-color: var(--el-color-danger);
  --el-badge-radius: 6px;
  --el-badge-font-size: 10px;
  --el-badge-padding: 4px;
  --el-badge-size: 10px;
}
</style>
